<template>
  <div>


    <div v-for="(item,index) in list" v-if="index==curIndex">
      <h1>{{item.title }}</h1>
      {{item.body}}

    </div>
    <div class="prev" @click="edit">
      &lt
    </div>
    {{curIndex+1}} / {{list.length}}
    <div class="next" @click="add">
      &gt
    </div>

  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'demo11',
    components: {},
    props: {},
    data() {
      return {
        list: [],
        curIndex: 0,

      };
    },
    mounted() {
      axios.get('https://api.github.com/repos/eyasliu/blog/issues').then(res => {
        console.log(res)
        this.list = res.data
      })
    },
    methods: {
      edit() {
        if (this.curIndex == 0) {
          return
        } else {
          this.curIndex--
        }

      },
      add() {
        if (this.curIndex == this.list.length - 1) {
          return
        } else {
          this.curIndex++
        }
      }
    },
    computed: {}
  };
</script>

<style scoped lang="less">
  .demo11 {
  }
</style>
<style lang="less">
  .demo11 {
  }
</style>
